<template>
  <div class="app-container">
    <div class="container-card">
      用户详情页
      <input
        v-model="inputVal"
        @input="inputChange"
        @compositionstart="inputStart"
        @compositionend="inputEnd"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputVal: "",
    };
  },
  methods: {
    // #region 输入框的单个输入事件 [中文是多次输入，结果一个]
    // 输入框值变了
    inputChange(e) {
      console.log(e.data);
    },
    // 中文拼音：开始输入
    inputStart(e) {
      console.log("中文拼音输入开始", e);
    },
    // 中文拼音：输入完毕
    inputEnd(e) {
      console.log("中文拼音输入结束", e);
    },
    // #endregion
  },
};
</script>
